<template>
<div class="model-features">
    <title-bar title="主成分分析"></title-bar>
    <div style="width:100%;height:400px;" id="myChart"></div>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'PrincipalAnalysis',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {}
    },
    mounted () {
        this.init()
    },
    methods: {
        getXMaxOrMin (value, n) {
            if (value.max < 5 && value.min > -5) {
                return 10 * n
            } else if (Math.abs(value.max) > Math.abs(value.min)) {
                return value.max * 3 * n
            } else {
                return -value.min * 3 * n
            }
        },
        getYMaxOrMin (value, n) {
            if (value.max < 5 && value.min > -5) {
                return 20 * n
            } else if (Math.abs(value.max) > Math.abs(value.min)) {
                return value.max * 5 * n
            } else {
                return -value.min * 5 * n
            }
        },
        init () {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            let rows = [
                [[2, 2, 400, 500, 70, 'Cluster1']],
                [[3, 3, 400, 300, 120, 'Cluster2']]
            ]
            let series = []
            for (let i = 0; i < rows.length; i++) {
                series.push({
                    name: rows[i][0][5],
                    data: rows[i],
                    type: 'scatter',
                    symbol: 'circle',
                    symbolSize: (data) => {
                        return [data[2], data[3]]
                    },
                    symbolRotate: rows[i][0][4],
                    label: {
                        emphasis: {
                            show: true,
                            formatter: (data) => {
                                return data.data[5]
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(120, 36, 50, 0.5)',
                            shadowOffsetY: 5
                        }
                    }
                })
            }
            let option = {
                legend: {
                    icon: 'rect',
                    itemWidth: 15,
                    itemHeight: 15,
                    orient: 'horizontal',
                    data: ['Cluster1', 'Cluster2']
                },
                xAxis: {
                    type: 'value',
                    name: 'Principal Component 1',
                    nameLocation: 'center',
                    nameGap: 22,
                    nameTextStyle: {
                        color: '#666'
                    },
                    min: (value) => {
                        this.getXMaxOrMin(value, -1)
                    },
                    max: (value) => {
                        this.getXMaxOrMin(value, 1)
                    },
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        onZero: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    scale: false,
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    }
                },
                grid: {
                    y: 30,
                    left: '100px',
                    right: '100px'
                },
                yAxis: {
                    type: 'value',
                    name: 'Principal Component 2',
                    nameTextStyle: {
                        color: '#666'
                    },
                    min: (value) => {
                        this.getYMaxOrMin(value, -1)
                    },
                    max: (value) => {
                        this.getYMaxOrMin(value, 1)
                    },
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        onZero: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    scale: false,
                    axisLabel: {
                        textStyle: {
                            color: '#666'
                        }
                    }
                },
                series
            }
            myChart.setOption(option, true)
        }
    }
}
</script>
